<!DOCTYPE html>
<html lang='cn'>
	<head>
		<meta name='viewport' content='width=device-width,initial-scale=1 .0 user-scale' />
		<meta charset='utf-8' />
		<title>像素灯网页配置</title>
		<style>
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}

			body {
				background: rgb(255, 255, 255) center center;
				background-size: cover;
				position: relative;
			}

			.container {
				position: absolute;
				text-align: center;
				width: 100%;
			}

			h1 {
				line-height: 80px;
				color: royalblue;
				font-size: 50px;
				margin: 0px;
			}
			h2 {
				line-height: 40px;
				color: royalblue;
				font-size: 30px;
				margin: 0px;
			}
			p {
				line-height: 50px;
				color: royalblue;
				font-size: 22px;
				margin: 5px;
			}

			textarea {
				line-height: 30px;
				width: 300px;
				height: 200px;
				color: royalblue;
				font-size: 22px;
				border-radius: 10px;
				margin: 5px;
			}
			input{
				line-height: 30px;
				width: 50px;
				height: 30px;
				font-size: 18px;
				border-radius: 5px;
				margin: 5px;
			}
			select {
				line-height: 30px;
				width: 120px;
				height: 30px;
				font-size: 18px;
				margin: 10px auto;
				border-radius: 5px;
			}

			.btn {
				width: 150px;
				height: 60px;
				background-color: #7cacae;
				color: #fff;
				font-size: 24px;
				line-height: 60px;
				margin: 10px auto;
				border-radius: 10px;
				transition: 1s;
			}

			.btn:hover {
				background-color: royalblue;
				width: 300px;
				height: 100px;
				line-height: 100px;
				font-size: 36px;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div class='container'>
			<h1>文本显示配置</h1>
		<form>
			<p>设置类型：
				<select>
					<option name='settype' value='0' selected>滑动背景</option>
					<option name='settype' value='1'>滑动字体</option>
					<option name='settype' value='2'>闪烁背景</option>
					<option name='settype' value='3'>闪烁字体</option>
				</select>
			</p>
			<p>颜色类型：
				<select>
					<option name='color' value='0' selected>纯色</option>
					<option name='color' value='1'>彩虹色</option>
					<option name='color' value='2'>渐变色</option>
					<option name='color' value='3'>调色板</option>
				</select>
			</p>
			<p>纯色 R<input id='solid_R' type='text' placeholder='0~255'/> G<input id='solid_G' type='text' placeholder='0~255'/> B<input id='solid_B' type='text' placeholder='0~255'/><p>
			<p>彩虹色 色调值<input id='rainbow_initialhue' type='text' placeholder='0~255'/> 色调差<input id='rainbow_deltahue' type='text' placeholder='0~255'/><p>
			<p>渐变色 开始RGB<input id='gradient_startcolor_R' type='text' placeholder='0~255'/> <input id='gradient_startcolor_G' type='text' placeholder='0~255'/> <input id='gradient_startcolor_B' type='text' placeholder='0~255'/><p>
			<p>渐变色 结束RGB<input id='gradient_endcolor_R' type='text' placeholder='0~255'/> <input id='gradient_endcolor_G' type='text' placeholder='0~255'/> <input id='gradient_endcolor_B' type='text' placeholder='0~255'/><p>
			<p>色盘风格 <select>
					<option name='palette_pal' value='0' selected>云朵渐变</option>
					<option name='palette_pal' value='1'>火山渐变</option>
					<option name='palette_pal' value='2'>海洋渐变</option>
					<option name='palette_pal' value='3'>树林渐变</option>
					<option name='palette_pal' value='4'>彩虹渐变</option>
					<option name='palette_pal' value='5'>彩带渐变</option>
					<option name='palette_pal' value='6'>派对渐变</option>
					<option name='palette_pal' value='6'>热浪渐变</option>
				</select>
				首色序号<input id='palette_startindex' type='text' placeholder='0'/>
			</p>
			<p>色盘色彩差<input id='palette_incindex' type='text' placeholder='0~255'/> 
				线性过渡效果 
				<select style="width:50px">
					<option name='palette_linearblend' value='0' selected>是</option>
					<option name='palette_linearblend' value='1'>否</option>
				</select></p>
			<h2>滑动显示配置</h2>
			<p>滑动速度（ms/像素）：<input id='slipshow_strspeed' type='text' placeholder='80'/><p>
			<p>字符间隔（像素）：<input id='slipshow_cspace' type='text' placeholder='8'/><p>
			<h2>闪烁显示配置</h2>
			<p>闪烁速度（ms/次）：<input id='twinkleshow_twkspeed' type='text' placeholder='80'/><p>
		</form>
			<script>
				var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);
				connection.onopen = function() {
					connection.send('Connect ' + new Date());
				};
				connection.onerror = function(error) {
					console.log('WebSocket Error ', error);
				};
				connection.onmessage = function(e) {
					console.log('Server: ', e.data);
				};				
				
				function clickOk() {
					var oSettype = document.getElementsByName('settype');
					for (var i = 0; i < oSettype.length; i++) {
						if (oSettype[i].selected) {
							oMessage = '{"settype":' + parseInt(oSettype[i].value).toString(16);
						}
					}
					
					var oColor = document.getElementsByName('color');
					for (var i = 0; i < oColor.length; i++) {
						if (oColor[i].selected) {
							oMessage = oMessage + ',"colortype":' + parseInt(oColor[i].value).toString(16);
						}
					}
					
					var S_R = document.getElementById('solid_R').value;
					var S_G = document.getElementById('solid_G').value;
					var S_B = document.getElementById('solid_B').value;
					oMessage = oMessage + ',"solid":[' + parseInt(S_R? S_R : 999);
					oMessage = oMessage + ',' + parseInt(S_G? S_G : 999);
					oMessage = oMessage + ',' + parseInt(S_B? S_B : 999);
					
					var R_I = document.getElementById('rainbow_initialhue').value;
					var R_D = document.getElementById('rainbow_deltahue').value;
					oMessage = oMessage + '],"rainbow":{"initialhue":' + parseInt(R_I? R_I : 999);
					oMessage = oMessage + ',"deltahue":' + parseInt(R_D? R_D : 999);
					
					var GS_R = document.getElementById('gradient_startcolor_R').value;
					var GS_G = document.getElementById('gradient_startcolor_G').value;	
					var GS_B = document.getElementById('gradient_startcolor_B').value;	
					oMessage = oMessage + '},"gradient":{"startcolor":[' + parseInt(GS_R? GS_R : 999);
					oMessage = oMessage + ',' + parseInt(GS_G? GS_G : 999);
					oMessage = oMessage + ',' + parseInt(GS_B? GS_B : 999);
					
					var GE_R = document.getElementById('gradient_endcolor_R').value;
					var GE_G = document.getElementById('gradient_endcolor_G').value;	
					var GE_B = document.getElementById('gradient_endcolor_B').value;
					oMessage = oMessage + '],"endcolor":[' + parseInt(GE_R? GE_R : 999);
					oMessage = oMessage + ',' + parseInt(GE_G? GE_G : 999);
					oMessage = oMessage + ',' + parseInt(GE_B? GE_B : 999);
					
					var oPal = document.getElementsByName('palette_pal');
					for (var i = 0; i < oPal.length; i++) {
						if (oPal[i].selected) {
							oMessage = oMessage + ']},"palette":{"pal":' + parseInt(oPal[i].value).toString(16);
						}
					}
					
					var P_S = document.getElementById('palette_startindex').value;
					var P_I = document.getElementById('palette_incindex').value;
					oMessage = oMessage + ',"startindex":' + parseInt(P_S? P_S : 999);
					oMessage = oMessage + ',"incindex":' + parseInt(P_I? P_I : 999);
					
					var oLine = document.getElementsByName('palette_linearblend');
					for (var i = 0; i < oLine.length; i++) {
						if (oLine[i].selected) {
							oMessage = oMessage + ',"linearblend":' + parseInt(oLine[i].value).toString(16);
						}
					}					
					
					var S_S = document.getElementById('slipshow_strspeed').value;
					var S_C = document.getElementById('slipshow_cspace').value;
					var T_T = document.getElementById('twinkleshow_twkspeed').value;
					oMessage = oMessage + '},"slipshow":{"strspeed":' + parseInt(S_S? S_S : 999);
					oMessage = oMessage + ',"cspace":' + parseInt(S_C? S_C : 999);
					oMessage = oMessage + '},"twinkleshow":{"twkspeed":' + parseInt(T_T? T_T : 999);
					
					oMessage = oMessage + '}}';
					console.log('oMessage: ' + oMessage);
					connection.send(oMessage);
				}
			</script>
			<input class='btn' type='submit' value='配置' onclick='clickOk();'>
			<form action='/words' method='POST'>
				<input class='btn' type='submit' value='返回文字'>
			</form>
		</div>
	</body>
</html>
